<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <base href="${baseHref}/">
      <link rel="stylesheet" type="text/css" href="./style.css">
      <title>Function Info</title>
  </head>
  <body>
    <div id="breadcrumb" class="breadcrumb">
    </div>
    <div id="root">
      <div class="app">
        <h4 class="info-main-title">函数</h4>
        <div class="base-info-main">
          <h4 class="base-info-main-title">
            基本信息
            <span id="arn" class="base-info-main-subTitle">
            </span>
          </h4>
          <div class="container">
            <div class="bar left-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">函数名称：</span>
                  <span id="functionName" class="value"></span>
                </li>
                <li class="item-li">
                  <span class="key">所属服务：</span>
                  <span id="serviceName" class="value"></span>
                </li>
                <li class="item-li">
                    <span class="key">所属地域：</span>
                    <span id="regionId" class="value"></span>
                  </li>
                <li class="item-li">
                  <span class="key">描述信息：</span>
                  <span id="description" class="value"></span>
                </li>
              </ul>
            </div>
            <div class="bar right-bar">
              <ul class="item-ul">
                <li class="item-li">
                  <span class="key">函数入口：</span>
                  <span id="handler" class="value"></span>
                </li>
                <li class="item-li">
                  <span class="key">运行环境：</span>
                  <span id="runtime" class="value"></span>
                </li>
                <li class="item-li">
                  <span class="key">超时时间：</span>
                  <span id="timeout" class="value"></span> 秒
                </li>
                <li class="item-li">
                  <span class="key">配置内存：</span>
                  <span id="memorySize" class="value"></span> MB
                </li>
              </ul>
            </div>
          </div>
          <div class="footer">
            <button class="btn btn-primary btn-remote-invoke" onclick="remoteInvoke()">远端调用</button>
          </div>
        </div>
      </div>
    </div>
    <script>
      const elements = ['functionName', 'serviceName', 'description', 'regionId',
        'handler', 'runtime', 'timeout', 'memorySize'
      ];
      window.addEventListener('message', event => {
        const message = event.data;
        switch (message.command) {
          case 'updateBaseInfo': {
            const funcBaseInfo = message.data;
            document.getElementById('breadcrumb').textContent = `函数计算 / ${funcBaseInfo.regionId} / ${funcBaseInfo.serviceName}`;
            for (const e of elements) {
              document.getElementById(e).textContent = funcBaseInfo[e];
            }
          }
        }
      });
    </script>
    <script>
      const vscode = acquireVsCodeApi();
      function remoteInvoke() {
        vscode.postMessage({
          command: 'remoteInvoke',
        });
      }
    </script>
  </body>
</html>
